<template>
  <transition name="el-zoom-in-center">
    <div class="jsbos-preview-main">
      <iframe width="100%" height="100%" :src="url" frameborder="0"></iframe>
    </div>
  </transition>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      url: "",
    };
  },
  mounted() {
    window.addEventListener("message", this.handleMessage);
  },
  methods: {
    init(id) {
      this.id = id || "";
      this.$nextTick(() => {
        const token = getToken();
        this.url = `${this.define.report}/preview.html?id=${id}&token=${token}&page=1`;
      });
    },
    async handleMessage(e) {
      const data = e.data;
      if (data === "closeDialog") {
        this.url = "";
        this.$emit("close");
      }
    },
  },
};
</script>
